<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24" class="card-box">
				<el-card>
					<div slot="header"><span><i class="el-icon-cpu"></i> 行程信息</span></div>
					<div class="el-table el-table--enable-row-hover el-table--medium">
						<table cellspacing="0" style="width: 100%;">
							<tbody>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">车牌号</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.licensePlate }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">司机姓名</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.driverName }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">司机电话</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.driverPhone }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">路线</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ address.join(' - ') }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">日期</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.startTime }} - {{ data.endTime }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">已占座</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.reserveSeatNum }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">可占座</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.remainderSeatNum }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">状态</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">
											<dict-tag :options="dict.type.use_car_status" :value="data.useCarStatus" />
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="card-box">
				<el-card>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="deptName" label="申请部门" align="center">
						</el-table-column>
						<el-table-column prop="nickName" label="申请人" align="center">
							<template slot-scope="scope">{{ scope.row.nickName || scope.row.userName }}</template>
						</el-table-column>
						<el-table-column prop="userPhone" label="申请人电话" align="center">
						</el-table-column>
						<el-table-column prop="address" label="路线" align="center">
							<template slot-scope="scope">{{ scope.row.address.join(' - ') }}</template>
						</el-table-column>
						<el-table-column prop="occupaSeatNum" label="占座数" align="center" width="100px">
						</el-table-column>
						<el-table-column prop="address" label="是否有货物" align="center" width="100px">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.is_goods" :value="scope.row.isGoods" />
							</template>
						</el-table-column>
						<el-table-column prop="goodsNum" label="货物占座数" align="center" width="100px"></el-table-column>
						<el-table-column prop="taskStatus" label="审批状态" align="center" width="100px">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus" />
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="流水号" align="center">
							<template slot-scope="scope">
								<a :href="scope.row.openUrl" target="_blank" style="color: blue;">{{ scope.row.sn }}</a>
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="申请时间" align="center" width="100">
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getDetails
	} from '@/api/bpmusecardetails/details'
	export default {
		dicts: ['is_goods', 'use_car_status', 'task_status'],
		data() {
			return {
				id: 0,
				data: [],
				address: [],
				tableData: []
			}
		},
		created() {
			// console.log('store' , store.getters);
			this.id = this.$route.params && this.$route.params.Id;
			this.getData();
		},
		methods: {
			/**
			 * 获取行程信息
			 */
			getData() {
				getDetails(this.id).then(res => {
					this.data = res.data;
					if(res.data.applyCarList){
						this.tableData = res.data.applyCarList.map(item => {
							item.address = [];
							item.address.push(item.startLocation);
							if (item.transitPlace) item.address = item.address.concat(item.transitPlace);
							item.address.push(item.endLocation);
						
							return item;
						});
					}
					

					this.address.push(res.data.startLocation);
					if (res.data.transitPlace) this.address = this.address.concat(res.data.transitPlace);
					this.address.push(res.data.endLocation);
					console.log('获取行程详情', res);
				})
			}
		}
	}
</script>

<style scoped>

</style>